<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>查找</title>
    <link rel="stylesheet" href="/static/layim-v3.7.6/src/css/layui.css">
    <style>
        .layim-msgbox {
            margin: 15px;
        }

        .layim-msgbox li {
            position: relative;
            margin-bottom: 10px;
            padding: 0 130px 10px 60px;
            padding-bottom: 10px;
            line-height: 22px;
            border-bottom: 1px dotted #e2e2e2;
        }

        .layim-msgbox .layim-msgbox-tips {
            margin: 0;
            padding: 10px 0;
            border: none;
            text-align: center;
            color: #999;
        }

        .layim-msgbox .layim-msgbox-system {
            padding: 0 10px 10px 10px;
        }

        .layim-msgbox li p span {
            padding-left: 5px;
            color: #999;
        }

        .layim-msgbox li p em {
            font-style: normal;
            color: #FF5722;
        }

        .layim-msgbox-avatar {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
        }

        .layim-msgbox-user {
            padding-top: 5px;
        }

        .layim-msgbox-content {
            margin-top: 3px;
        }

        .layim-msgbox .layui-btn-small {
            padding: 0 15px;
            margin-left: 5px;
        }

        .layim-msgbox-btn {
            position: absolute;
            right: 0;
            top: 12px;
            color: #999;
        }
    </style>
</head>
<body>

<ul class="layim-msgbox" id="LAY_view"></ul>

<textarea title="消息模版" id="LAY_tpl" style="display: none">
{{#  layui.each(d.data, function(index, item){ }}

    {{#  if(item.type === 0){ }}
         <li data-id="{{ item.id }}" data-user="{{ item.user_id }}" data-from="{{ item.from_id }}" data-group="{{ item.group_id }}">
            <a><img src="{{ item.avatar }}" class="layui-circle layim-msgbox-avatar"></a>
            <p class="layim-msgbox-user">
                <a>{{ item.username||'' }}</a>
                <span>{{ item.time }}</span>
            </p>
            <p class="layim-msgbox-content">
                {{ item.msg }}
                <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
            </p>

            {{#  if(item.status === 0){ }}
                <p class="layim-msgbox-btn">
                    <button class="layui-btn layui-btn-small" {{#  if(item.is_group == 0){ }} data-type="agree" {{# } else { }} data-type="agreeGroup" {{#  } }}>同意</button>
                    <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
                </p>
            {{# } else { }}
                <p class="layim-msgbox-btn">
                    {{#  if(item.status === 1){ }} 已同意
                    {{# } else { }} <em>已拒绝</em>
                    {{#  } }}
                </p>
            {{#  } }}
        </li>

    {{# } else { }}
        <li class="layim-msgbox-system">
          <p><em>系统：</em>{{ item.msg }}<span>{{ item.time }}</span></p>
        </li>
    {{#  } }}

{{#  }); }}
</textarea>

<script src="/static/layim-v3.7.6/src/layui.js"></script>
<script>
    window.parent.read();

    layui.use(['layim', 'flow'], function () {
        var layim = layui.layim
            , layer = layui.layer
            , laytpl = layui.laytpl
            , $ = layui.jquery
            , flow = layui.flow;
        var cache = {}; //用于临时记录请求到的数据

        //请求消息
        var renderMsg = function (page, callback) {
            $.get('/user/getNotice', {
                page: page || 1
            }, function (res) {
                if (res.code != 0) {
                    return layer.msg(res.msg);
                }
                //记录来源用户信息
                layui.each(res.data, function (index, item) {
                    cache[item.id] = item;
                });
                callback && callback(res.data, res.pages);
            }, "json");
        };

        //消息信息流
        flow.load({
            elem: '#LAY_view' //流加载容器
            , isAuto: false
            , end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
            , done: function (page, next) { //加载下一页
                renderMsg(page, function (data, pages) {
                    var html = laytpl(LAY_tpl.value).render({
                        data: data
                        , page: page
                    });
                    next(html, page < pages);
                });
            }
        });

        //操作
        var active = {
            //同意
            agree: function (othis) {
                let li = othis.parents('li');
                let uid = li.data('id'), user_id = li.data('user'), from_id = li.data('from'), group_id = li.data('group');
                let userData = cache[uid];
                //选择分组
                parent.layui.layim.setFriendGroup({
                    type: 'friend'
                    , username: userData.username
                    , avatar: userData.avatar
                    , group: parent.layui.layim.cache().friend //获取好友分组数据
                    , submit: function (group, index) {
                        window.parent.agreeAdd(uid, user_id, from_id, group_id);
                        //将好友追加到主面板
                        parent.layui.layim.addList({
                            type: 'friend'
                            , avatar: userData.avatar //好友头像
                            , username: userData.username //好友昵称
                            , groupid: group //所在的分组id
                            , id: from_id //好友ID
                            , sign: userData.sign //好友签名
                        });
                        parent.layer.close(index);
                        othis.parent().html('已同意');
                    }
                });
            }
            , agreeGroup: function (othis) {
                let li = othis.parents('li');
                let id = li.data('id'), user_id = li.data('user'), from_id = li.data('from'), group_id = li.data('group');
                layer.confirm('确定同意吗？', function (index) {
                    window.parent.agreeAdd(id, user_id, from_id, group_id);
                    layer.close(index);
                    othis.parent().html('已同意');
                });
            }
            //拒绝
            , refuse: function (othis) {
                let li = othis.parents('li');
                let id = li.data('id'), user_id = li.data('user'), from_id = li.data('from'), group_id = li.data('group');
                layer.confirm('确定拒绝吗？', function (index) {
                    window.parent.refuseAdd(id, user_id, from_id, group_id);
                    layer.close(index);
                    othis.parent().html('<em>已拒绝</em>');
                });
            }
        };
        $('body').on('click', '.layui-btn', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>
</body>
</html>
